<template>
  <div v-loading="loading" ref="resource-wrap">
    <div class="course-btn-wrap search-wrap">
      <el-row :gutter="20">
        <el-col :span="8" v-if="true">
          <el-input
            placeholder="请输入内容"
            v-model="input1"
            class="input-with-select"
            clearable
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="资源名称" value="1"></el-option>
              <el-option label="创建人" value="2"></el-option>
            </el-select>
            <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
          </el-input>
        </el-col>
        <el-col :span="6">
          <DeptTreeSelect @e-emit="setDept" />
        </el-col>
        <el-col :span="10">
          <el-button type="custom" @click="getList()" plain>搜索</el-button>
          <el-button type="custom" @click="handleSubmit()">提交</el-button>
          <!-- <el-button type="primary" plain @click="handleBack()"
              >返回</el-button
            > -->
        </el-col>
      </el-row>
    </div>

    <div class="course-item" v-for="v in tableData" :key="v.id">
      <el-card class="box-card">
        <div class="course-top">
          <el-row :gutter="20">
            <el-col :span="6">
              <p>{{ v.createTime }}</p>
            </el-col>
            <el-col :span="6">
              <p v-if="v.isDel"
                ><i>课程状态：</i><span class="color-danger">资源已删除</span>
              </p>
              <p v-if="!v.isDel">
                <span v-show="v.status == 0 && v.auditStatus == 1">
                  <i>课程状态：</i>暂存</span
                >
                <span v-show="v.status == 1"><i>课程状态：</i>已上线</span>
                <span v-show="v.status == 2"><i>课程状态：</i>待发布</span>
              </p>
              <p v-if="!v.isDel" v-show="v.status == 0 && v.auditStatus != 1">
                <i>审核状态：</i>
                <span v-show="v.auditStatus == 4">待审核</span>
                <span class="color-success" v-show="v.auditStatus == 2">
                  审核通过，待发布
                </span>
                <span class="color-danger" v-show="v.auditStatus == 3">
                  审核未通过
                </span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="sheng" :title="v.team">{{ v.team }}</p>
            </el-col>
          </el-row>
        </div>
        <div class="course-info">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="course-title-wrap" @click="handlePreview(v)">
                <img :src="coverImg(v)" class="cover-img" />
                <p class="four-ellipsis" :title="v.title">{{ v.title }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="course-info-wrap">
                <p>建设单位：{{ deptNames(v) }}</p>
                <p>板块类别：{{ v.courseType | auditType }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="course-btn-wrap">
                <el-button
                  type="success"
                  plain
                  size="mini"
                  :disabled="v.isDel"
                  @click="handlePreview(v)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  :disabled="v.isDel"
                  v-if="!v.isChecked"
                  @click="handlerChang(v, true)"
                  >选择</el-button
                >
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  :disabled="v.isDel"
                  v-if="v.isChecked"
                  @click="handlerChang(v, false)"
                  >取消选择</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import { expertsReviewResourceAdd } from '@/api/admin/audit/expertsReviewResource.js'
import { sysCourseQuery } from '@/api/admin/courseLibrary/sysCourse.js'
import webinfo from '@/mixins/webinfo.js'
import setInfo from '@/mixins/setInfo.js'
import coursePreview from '@/mixins/coursePreview'
export default {
  mixins: [webinfo, setInfo, coursePreview],
  components: {
    DeptTreeSelect: () => import('@/components/dataSelect/deptTreeSelect'),
  },
  data() {
    return {
      loading: false,
      listQuery: {
        page: 1,
        limit: 10,
        courseType: '',
        sourceUnit: '',
        // title: '',
      },
      select: '1',
      input1: '',
      tableData: [],
      pageObj: {},
      form: {
        resType: '1',
        reviewId: '', //评审会
        resourceList: [], //资源集合
      },
    }
  },
  computed: {
    reviewData() {
      return JSON.parse(this.getSession('reviewData'))
    },
    deptNames() {
      return (v) => {
        if (v.sourceType == 2 && v.extFiled2) {
          //校外资源前端显示资源建设单位
          return v.extFiled2
        } else if (v.tbSysDept) {
          let dep = v.tbSysDept.deptFullnamepath.split('/')
          if (dep.length >= 3) {
            return dep[2]
          } else {
            return '陆军工程大学'
          }
        } else {
          return '陆军工程大学'
        }
      }
    },
  },
  watch: {
    reviewData: {
      immediate: true,
      handler() {
        this.extFiled = JSON.parse(this.reviewData.extFiled)
        this.getList()
      },
    },
  },
  methods: {
    async getList() {
      this.loading = true
      this.listQuery.courseType = JSON.parse(
        this.reviewData.extFiled,
      ).courseType
      this.listQuery.title = ''
      this.listQuery.team = ''
      if (this.select == 1) {
        this.listQuery.title = this.input1
      } else if (this.select == 2) {
        this.listQuery.team = this.input1
      }
      let res = await sysCourseQuery(this.listQuery)
      this.tableData = res.data.data
      this.tableData.forEach((v) => {
        this.$set(v, 'isDel', false)
        this.$set(v, 'isChecked', false)
        if (!v.id) {
          v = JSON.parse(v.extFiled)
          v.isDel = true
        }
        this.form.resourceList.forEach((item) => {
          if (item.id == v.id) {
            v.isChecked = true
          }
        })
      })
      this.pageObj = res.data
      this.loading = false
      this.$refs['resource-wrap'].scrollTo(0, 0)
    },
    handlerChang(v, type) {
      if (type) {
        this.form.resourceList.push(v)
      } else {
        this.form.resourceList = this.form.resourceList.filter(
          (m) => m.id != v.id,
        )
      }
      this.tableData.forEach((item) => {
        if (item.id == v.id) {
          item.isChecked = type
        }
      })
    },
    async handleSubmit() {
      this.form.reviewId = this.reviewData.id
      if (!this.form.resourceList.length) {
        this.$message.error('请选择资源')
        return
      }
      let res = await expertsReviewResourceAdd(this.form)
      if (!res || res.data.code != 0) return
      this.$message({
        message: '操作成功',
        type: 'success',
      })
      this.handleBack()
    },
    handleBack() {
      this.form.resourceList = []
      this.$router.push({ name: 'review-resource' })
    },
    setDept(v) {
      this.listQuery.sourceUnit = v.id
    },
    toCourseDetail(row) {
      let type = row.courseType
      let name = 'course-detail'
      if (type == 1) {
        name = 'course-detail'
      }
      if (type == 2) {
        name = 'specialty-detail'
      }
      if (type == 3) {
        name = 'arms-librarys'
      }
      if (type == 4) {
        name = 'topic-detail'
      }
      if (type == 5) {
        name = 'micro-detail'
      }
      if (type == 6) {
        name = 'training-detail'
      }
      this.$store.commit('SETCURCOURSE', row)
      if (type == 3) {
        this.$router.push({
          name: name,
          query: { id: row.id, type: 3 },
        })
      } else {
        this.$router.push({
          name: name,
          query: { courseId: row.id },
        })
      }
    },
  },
}
</script>
<style scoped lang="scss">
.course-item {
  margin-top: 20px;
  .course-top {
    height: 48px;
    line-height: 48px;
    background: #f8f8f8;
    padding: 0 20px;
    border-bottom: 2px solid #eee;
  }
  .course-info {
    border-bottom: 1px solid #eee;
    .course-title-wrap {
      padding: 20px;
      min-height: 80px;
      position: relative;
      .cover-img {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 120px;
        height: 80px;
        display: block;
        margin-right: 20px;
        cursor: pointer;
        border: 1px solid #eee;
      }
      p {
        color: #333;
        font-size: 14px;
        line-height: 20px;
        word-break: break-all;
        padding-left: 140px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
          color: var(--colorH1);
        }
      }
    }
    .course-info-wrap {
      padding: 20px;
      min-height: 80px;
      line-height: 32px;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
    }
    .course-btn-wrap {
      padding: 20px 0;
      min-height: 80px;
      button {
        margin-right: 10px;
      }
    }
  }
}
</style>
<style scoped>
.search-wrap >>> .el-select .el-input {
  width: 130px;
}
.search-wrap >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>